<template>
  <view class="bg">
    <view class="steps">
      <view class="steps_item" v-for="(i, index) in infoList">
        <view class="s_r">
          <view v-if="index != 0" class="line" :class="i.color"></view>
          <view v-else class="line bg-transparent"></view>
          <view class="index" :class="i.color">
            <!-- {{ index + 1 }} -->
            <span v-if="i.color === 'bg-success'">√</span>
          </view>
          <view
            v-if="index != infoList.length - 1"
            class="line"
            :class="i.color"
          ></view>
          <view v-else class="line bg-transparent"></view>
        </view>
        <view class="s_l">
          <view class="info_item" @tap="topage(index)">
            <!-- <text>{{ i.date }}</text>
            <view :style="{ WebkitLineClamp: lineNum != 0 ? lineNum : '' }">{{
              i.info
            }}</view> -->
            <slot name="card" :data="i"></slot>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'YSteps',
  props: {
    infoList: {
      type: Array,
      default: [],
    },
    color: {
      type: String,
      default: '#fff',
    },
    backgroundColor: {
      type: String,
      default: '#ccc',
    },
    lineNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  onLoad(e) {
    //获取列表
  },
  methods: {
    topage(e) {
      this.$emit('click', e);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}

.bg {
  margin: 20rpx 0;
  background-color: #f2f2f2;
}

.steps {
  display: flex;
  width: 100%;
  flex-direction: column;

  .steps_item {
    display: flex;

    .s_r {
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .line {
        flex: 1;
        width: 5rpx;
      }

      .index {
        width: 40rpx;
        height: 40rpx;
        font-size: 12px;
        text-align: center;
        line-height: 40rpx;
        border-radius: 50rpx;
        color: #fff;
      }
    }

    .s_l {
      // display: flex;
      flex: 1;
      flex-direction: column;
      padding: 20rpx 0;

      .info_item {
        background-color: #ffffff;
        margin-right: 30rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30rpx;
        box-shadow: 0 10rpx 30rpx #ddd;
        width: 100%;

        text {
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 25px;
        }

        view {
          font-size: 14px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;

          flex-direction: column;
        }
      }

      .info_item:active {
        background-color: #f4f4f4;
      }
    }
  }
}

.bg-transparent {
  background-color: transparent;
}
.bg-primary {
  background-color: $u-type-primary;
}
.bg-warning {
  background-color: $u-type-warning;
}
.bg-success {
  background-color: $u-type-success;
}
.bg-error {
  background-color: $u-type-error;
}
.bg-info {
  background-color: $u-type-info;
}
</style>
